Ext.define('MyApp.view.user.List',
{
    extend : 'Ext.panel.Panel',
    alias : 'widget.userlist',
    title : 'All Users',
    border : 0,

    layout :
    {
        type : 'vbox',
        align : 'stretch'
    },

    initComponent : function()
    {
        var me = this;
        var store = Ext.data.StoreManager.lookup('Users');
        me.items =
        [
            {
                xtype : 'grid',
                itemId : 'dataList',
                store : store,
                columnLines : true,
                columns :
                {
                    items :
                    [
                        {
                            text : 'User Id',
                            dataIndex : 'userId'
                        },
                        {
                            text : 'Name',
                            dataIndex : 'name'
                        },
                        {
                            text : 'Email',
                            dataIndex : 'email'
                        }
                    ],

                    defaults :
                    {
                        flex : 1
                    }
                }
            },
            {
                xtype : 'container',
                padding : 15,

                items :
                [

                    //                    {
                    //                        xtype : 'button',
                    //                        text : 'Load Data',
                    //                        handler : function(thiz)
                    //                        {
                    //                            var data = [];
                    //                            for (var i = 0; i < 10; i++)
                    //                            {
                    //                                data.push(
                    //                                {
                    //                                    id : i,
                    //                                    name : 'Name ' + i,
                    //                                    email : 'Email ' + i + '_' + i
                    //                                });
                    //                            }
                    //                            me.down('#dataList').store.loadRawData(data);
                    //                        }
                    //                    },
                    {
                        xtype : 'button',
                        text : 'Load Server Data',
                        handler : function(thiz)
                        {
                            Ext.Ajax.request(
                            {
                                url : "http://localhost:8080/extjs_spring/" + "getUsers",
                                params :
                                {
                                    data : []
                                },
                                async : true,
                                success : function(resp)
                                {
                                    var data = Ext.decode(resp.responseText);
                                    me.down('#dataList').store.loadRawData(data);

                                    console.log("success");
                                },
                                failure : function(resp)
                                {
                                    console.log("failure");
                                }
                            });
                        }
                    }
                ]
            }
        ];

        this.callParent(arguments);
    }
});